<template>
  <div>
    <div class="content" style="min-height: 500px">
      <div class="title">
        <h1>{{ STEP_INDEX[currentStep] }}</h1>
      </div>
      <el-steps
        direction="vertical"
        class="steps"
        style="max-width: 600px; margin: 30px auto"
        :active="currentStep"
        finish-status="success"
        align-center
      >
        <el-step
          v-for="(item, index) in STEP_INDEX"
          :key="index"
          :title="item"
        />
      </el-steps>
      <!-- 竞赛基本信息表单 -->
      <div v-if="currentStep === 0" class="form">
        <el-form
          label-position="top"
          :model="upContestForm"
          :rules="upContestFormRules"
          ref="contestFormRef"
        >
          <el-form-item label="竞赛名称" prop="title">
            <el-input v-model="upContestForm.title" />
          </el-form-item>
          <el-form-item label="竞赛简介" prop="description">
            <el-input v-model="upContestForm.description" type="textarea" />
          </el-form-item>
          <el-form-item label="竞赛类型" prop="categoryId">
            <el-select v-model="upContestForm.categoryId" placeholder="请选择一个分类">
              <el-option v-for="item of categoryList" :key="item.id" :value="item.id" :label="item.categoryName"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="比赛地点" prop="local">
            <el-input v-model="upContestForm.local" />
          </el-form-item>
<!--          <el-form-item label="主办方" prop="organizer">
            <el-select
              v-model="upContestForm.organizer"
              filterable
              placeholder="主办方"
              style="width: 240px"
            >
              <el-option
                v-for="item in organizersData"
                :key="item.name"
                :label="item.name"
                :value="item.name"
              />
            </el-select>
          </el-form-item>-->
          <el-form-item label="竞赛封面" prop="cover">
            <!-- <el-upload
              :ref="uploadRef"
              :headers="upHeaders"
              :action="uploadUrl"
              :limit="1"
              :on-exceed="handleExceed"
              :on-success="handleSuccess"
              :on-change="handleChange"
              :multiple="false"
              list-type="picture-card"
              :file-list="fileList"
              name="file"
            >
              <i class="el-icon-plus" />
            </el-upload> -->
            <ImageUpload limit="1" :isShowTip="true" v-model="upContestForm.cover" />
            <span style="padding-left: 20px; color: #666">
              注：重新上传默认替换掉原来的封面
            </span>
          </el-form-item>
<!--          <el-form-item label="报名开始时间" prop="enrollStartDate">
            <el-date-picker
              format="YYYY-MM-DD"
              value-format="YYYY-MM-DD"
              v-model="upContestForm.enrollStartDate"
              type="date"
              placeholder="报名开始时间"
            />
          </el-form-item>
          <el-form-item label="报名结束时间" prop="enrollEndDate">
            <el-date-picker
              format="YYYY-MM-DD"
              value-format="YYYY-MM-DD"
              v-model="upContestForm.enrollEndDate"
              type="date"
              placeholder="报名开始时间"
            />
          </el-form-item>-->
          <el-form-item label="比赛开始时间" prop="startDate">
<!--            <el-date-picker
              format="YYYY-MM-DD"
              value-format="YYYY-MM-DD"
              v-model="upContestForm.startDate"
              type="date"
              placeholder="比赛开始时间"
              @change="changedTimeS"
            />-->
            <input type="date" v-model="upContestForm.startDate">
          </el-form-item>
          <el-form-item label="比赛结束时间" prop="endDate">
<!--            <el-date-picker
              format="YYYY-MM-DD"
              value-format="YYYY-MM-DD"
              v-model="upContestForm.endDate"
              type="date"
              placeholder="比赛结束时间"
              @change="changedTimeE"
            />-->
            <input type="date" v-model="upContestForm.endDate">
          </el-form-item>
<!--          <el-form-item label="是否允许提交电子档案">
            <el-radio-group v-model="upContestForm.isEmail">
              <el-radio :value="0">是</el-radio>
              <el-radio :value="1">否</el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item label="是否使用系统自带模板">
            <el-radio-group v-model="upContestForm.isSystem">
              <el-radio :value="0">是</el-radio>
              <el-radio :value="1">否</el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item label="是否允许评论">
            <el-radio-group v-model="upContestForm.isComment">
              <el-radio :value="0">是</el-radio>
              <el-radio :value="1">否</el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item label="是否允许组队">
            <el-radio-group v-model="upContestForm.isTeam">
              <el-radio :value="0">是</el-radio>
              <el-radio :value="1">否</el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item label="是否收费">
            <el-radio-group v-model="upContestForm.isToll">
              <el-radio :value="0">是</el-radio>
              <el-radio :value="1">否</el-radio>
            </el-radio-group>
          </el-form-item>-->
          <!-- 最大报名人数 -->
          <el-form-item label="最大报名人数" prop="personNum">
            <el-input v-model="upContestForm.personNum" />
          </el-form-item>
          <!-- 这里 只有当 isToll 为 true 时才显示 -->
<!--          <el-form-item
            v-if="upContestForm.isToll === 0"
            label="费用金额"
            prop="toll"
          >
            <el-input v-model="upContestForm.toll" />
          </el-form-item>
          <el-form-item
            v-if="upContestForm.isTeam === 0"
            label="队伍人数"
            prop="teamNum"
          >
            <el-input v-model="upContestForm.teamNum" type="number" />
          </el-form-item>-->
          <el-form-item label="竞赛说明" prop="content">
            <Editor :value="upContestForm.content" :height="300" />
          </el-form-item>
          <el-form-item>
            <el-button @click="currentStepNext" type="primary"
            >下一步</el-button
            >
          </el-form-item>
        </el-form>
      </div>
      <!-- 设置竞赛报名模板 -->
      <div v-if="currentStep === 1" class="form" style="min-height: 500px">
        <el-form label-position="top">
          <el-form-item
            v-for="(item, index) in upContestForm.templateValueList"
            :key="index"
            :label="item.name"
          >
            <div class="template-form-item">
              <div class="hove">
                <div @click="handleUpdateForm(item)" class="edit">
                  <el-button
                    :disabled="item.is_delete"
                    type="primary"
                    icon="el-icon-edit"
                  />
                </div>
                <div @click="handleDeleteForm(item)" class="delete">
                  <el-button
                    :disabled="item.is_delete"
                    type="primary"
                    icon="el-icon-delete"
                  />
                </div>
              </div>
              <!-- 下拉框 -->
              <el-select v-if="item.type === 1" :type="item.type">
                <el-option
                  v-for="(value, index) in item.value"
                  :key="index"
                  :label="value"
                  :value="value"
                />
              </el-select>
              <!-- 普通文本框 -->
              <el-input v-else :type="item.type" />
            </div>
          </el-form-item>
          <add-apply-or-update
            v-if="addOrUpdateFormVisible"
            ref="addOrUpdateFormRef"
            @syncAdd="syncAdd"
          />
        </el-form>
        <el-button type="primary" @click="add">添加表单项</el-button>
        <el-button @click="currentStep--" type="primary">上一步</el-button>
        <el-button @click="currentStep++" type="primary">下一步</el-button>
      </div>
      <!-- 验证身份信息 -->
      <div v-if="currentStep === 2" class="form">
        <el-form
          label-position="top"
          :model="upContestForm"
          :rules="upContestFormRules"
          ref="contestFormRef"
        >
          <el-form-item label="密码" prop="password">
            <el-input type="password" v-model="upContestForm.password" />
          </el-form-item>
          <el-form-item>
            <el-button @click="upContestInfo" type="primary">发布竞赛</el-button>
            <el-button @click="currentStep--" type="primary">上一步</el-button>
          </el-form-item>
        </el-form>
      </div>
      <!-- 发布竞赛 -->
      <div v-if="currentStep === 3" class="release-success">
        <div class="icon-success">
          <svg
            t="1715586489705"
            class="icon"
            viewBox="0 0 1024 1024"
            version="1.1"
            xmlns="http://www.w3.org/2000/svg"
            p-id="4303"
            width="100"
            height="100"
          >
            <path
              d="M512 64.3C264.7 64.3 64.3 264.7 64.3 512c0 247.3 200.5 447.7 447.7 447.7 247.3 0 447.7-200.5 447.7-447.7 0-247.3-200.4-447.7-447.7-447.7z m257.9 393.3c-80.9 9.1-260.1 164.9-321.5 250.9-66.7-93.9-150.1-153.5-209.8-180l126.3-67.7 86.8 118.7s160-217.7 348.9-287.5c-10.4 61.5-41.7 72.5-30.7 165.6z"
              fill="#2FC25B"
              p-id="4304"
            />
          </svg>
          <div class="text">
            <span>发布成功</span>
            <p>恭喜您，竞赛发布成功！社区将在24小时内审核并发布竞赛。</p>
          </div>
        </div>
        <div class="btn">
          <el-button @click="userRouter.push('/')" type="primary"
          >回到首页</el-button
          >
          <el-button @click="pushNewContest" type="primary"
          >发布新的竞赛</el-button
          >
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import Cropper from "cropperjs";
import "cropperjs/dist/cropper.css";
import { debounce } from "@/utils/debounce";
import { isQuit } from "@/utils/tools";
import AddApplyOrUpdate from './addApplyOrUpdate.vue';
import axios from "axios";
import { getToken } from '@/utils/auth'

import {
  getContestDto,
  getOrganizersList as getOrganizersListAPI,
  addOrUpdateContestDto
} from "../../../api/contest/contest";

import {
  listExpandContestCategory as findExpandContestCategoryList
} from "@/api/category/category"

export default {
  components: {
    AddApplyOrUpdate,
  },
  data() {
    return {
      STEP_INDEX: [
        "竞赛基本信息",
        "设置竞赛报名模板",
        "验证身份信息",
        "发布竞赛",
      ],
      currentStep: 0,
      dialogImageUrl: "",
      dialogVisible: false,
      upload: null,
      cropper: null,
      newImage: "",
      isFile: false,
      fileList: [],
      uploadUrl: "http://8.129.161.191:8848/common/upload",
      upContestForm: {
        categoryId: "",
        content: "123123",
        cover: "",
        description: "",
        startDate: "",
        endDate: "",
        enrollEndDate: "",
        enrollStartDate: "",
        imgNameList: [],
        imgUrlList: [],
        isComment: 0,
        isEmail: 0,
        isSystem: 0,
        isTeam: 0,
        isToll: 0,
        local: "",
        organizer: "",
        password: "",
        personNum: 0,
        pushId: "",
        teamNum: 0,
        title: "",
        toll: 0,
        templateValueList: [],
      },
      upContestFormRules: {
        categoryId: [
          {
            required: true,
            message: "竞赛类别不能为空",
            trigger: ["blur", "change"],
          },
        ],
        content: [
          {
            required: true,
            message: "竞赛内容不能为空",
            trigger: ["blur", "change"],
          },
        ],
        cover: [
          // {
          //   required: true,
          //   message: "请上传竞赛封面",
          //   trigger: ["blur", "change"],
          // },
        ],
        description: [
          {
            required: true,
            message: "请填写竞赛简介",
            trigger: ["blur", "change"],
          },
        ],
        startDate: [
          { validator: this.checkEnrollEndDate, trigger: ["blur", "change"] },
          {
            required: true,
            message: "请填写开始时间",
            trigger: ["blur", "change"],
          },
        ],
        endDate: [
          { validator: this.checkEnrollEndDate, trigger: ["blur", "change"] },
          {
            required: true,
            message: "请填写结束时间",
            trigger: ["blur", "change"],
          },
        ],
        enrollEndDate: [
          { validator: this.checkEnrollEndDate, trigger: ["blur", "change"] },
          {
            required: true,
            message: "请填写报名结束时间",
            trigger: ["blur", "change"],
          },
        ],
        enrollStartDate: [
          { validator: this.checkEnrollEndDate, trigger: ["blur", "change"] },
          {
            required: true,
            message: "请填写报名开始时间",
            trigger: ["blur", "change"],
          },
        ],
        local: [
          {
            required: true,
            message: "请添加地点",
            trigger: ["blur", "change"],
          },
        ],
        organizer: [
          {
            required: true,
            message: "请添加主办方",
            trigger: ["blur", "change"],
          },
        ],
        password: [
          {
            required: true,
            message: "请填写密码",
            trigger: ["blur", "change"],
          },
        ],
        personNum: [
          {
            required: true,
            message: "请填写人数",
            trigger: ["blur", "change"],
          },
        ],
        teamNum: [
          {
            required: true,
            message: "请填写队伍人数",
            trigger: ["blur", "change"],
          },
        ],
        title: [
          {
            required: true,
            message: "请填写标题",
            trigger: ["blur", "change"],
          },
        ],
        toll: [
          {
            required: true,
            message: "请填写金额",
            trigger: ["blur", "change"],
          },
        ],
      },
      addOrUpdateFormRef: null,
      addOrUpdateFormVisible: false,
      categoryList: [],
      upHeaders: {},
      organizersData: [],
      optionProps: {
        value: "id",
        label: "categoryName",
        children: "children",
      },
      excuId: null
    };
  },
  mounted() {
    // 得到id, 用来确认是修改还是添加的
    this.excuId = location.href.split('?')[1].split('=')[1];
    // 能进去就代表有东西, 表示修改
    if (this.excuId) {
      getContestDto(this.excuId)
        .then(res => {
          this.upContestForm = res.data
          console.log(res)
        })
        .catch(res => {
          console.log(res)
        })
    }
  },
  created() {
    const { categoryList, upHeaders, organizersData, optionProps } =
      this.usePublish();
    this.upHeaders['Authorization'] = 'Bearer ' + getToken() // 让每个请求携带自定义token 请根据实际情况自行修改;
    this.organizersData = organizersData;
  },
  methods: {
    async getPublishCategoryList() {
      let res = await findExpandContestCategoryList(null);
      this.categoryList = res.data
      if (res.data.code != 200) {
        ElMessage.error(res.data.msg);
        console;
      } else {
        return res.data;
      }
    },
    async usePublish() {
      const route = this.$route;
      const upHeaders = {
        token: "",
      };
      const optionProps = {
        value: "id",
        label: "categoryName",
        children: "children",
      };
      // 获取发布比赛的分类列表
      this.getPublishCategoryList().then((res) => {
        this.categoryList = res;
        console.log(res)
      });
      // 获取主办方列表
      getOrganizersListAPI().then((res) => {
        this.organizersData = res.data.data;
      });

      return {
        categoryList,
        upHeaders,
        organizersData,
        optionProps,
      };
    },
    pushNewContest() {
      window.removeEventListener("beforeunload", isQuit);
      this.$router.go(0);
    },
    handlePictureCardPreview() {
      this.dialogImageUrl = this.newImage;
      this.dialogVisible = true;
    },
    handleExceed(files) {
      this.upload.clearFiles();
      const file = files[0];
      file.uid = this.genFileId();
      this.upload.handleStart(file);
    },
    handleSuccess(response) {
      this.upContestForm.cover = response.response.url;
    },
    handleChange(rawFile) {
      if (
        rawFile.raw.type !== "image/jpeg" &&
        rawFile.raw.type !== "image/png"
      ) {
        this.$message.error("请选择图片");
        return false;
      }
      this.isFile = true;
      this.$nextTick(() => {
        const img = document.getElementById("cropper");
        this.cropper = new Cropper(img, {
          aspectRatio: 2 / 1,
          autoCrop: true,
          cropBoxResizable: false,
          dragMode: "move",
          autoCropArea: 0.8,
        });
      });
    },
    cropImage() {
      const base64Image = this.cropper
        .getCroppedCanvas()
        .toDataURL("image/jpeg");
      this.newImage = base64Image;
      console.log(base64Image);
      this.cropper.getCroppedCanvas().toBlob((res) => {
        const file = new File([res], res.type, { type: res.type });
        const formData = new FormData();
        formData.append("file", file);
        axios
          .post("http://8.129.161.191:8848/common/upload", formData, {
            headers: {
              "Content-Type": "multipart/form-data",
              token: this.upHeaders.token,
            },
          })
          .then((res) => {
            this.upContestForm.cover = res.data.url;
          })
          .catch(() => {
            this.$message.error("上传图片失败，请重新上传");
          });
      });
      this.isFile = false;
    },
    handleBeforeClose(done) {
      this.$confirm("当前裁剪图片未上传确定要关闭吗？", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
        showClose: false,
      }).then(() => {
        done();
        this.fileList = [];
      });
    },
    checkFormDate(callback) {
      // 时间校验逻辑保持不变
      if (
        new Date(upContestForm.value.enrollEndDate).setHours(23, 59, 59, 0) <=
        new Date().getTime()
      ) {
        callback(new Error("报名结束时间不能小于当前时间"));
      } else if (
        new Date(upContestForm.value.enrollEndDate) <
        new Date(upContestForm.value.enrollStartDate)
      ) {
        callback(new Error("报名结束时间不能小于报名开始时间"));
      } else if (
        new Date(upContestForm.value.enrollEndDate) >
        new Date(upContestForm.value.startDate)
      ) {
        callback(new Error("报名结束时间不能大于比赛开始时间"));
      } else if (
        new Date(upContestForm.value.enrollEndDate) >
        new Date(upContestForm.value.endDate)
      ) {
        callback(new Error("报名结束时间不能大于比赛结束时间"));
      } else {
        // 报名结束时间检查通过
      }

      if (
        new Date(upContestForm.value.enrollStartDate).setHours(23, 59, 59, 0) <=
        new Date().getTime()
      ) {
        callback(new Error("报名开始时间不能小于当前时间"));
      } else if (
        new Date(upContestForm.value.enrollStartDate) >
        new Date(upContestForm.value.enrollEndDate)
      ) {
        callback(new Error("报名开始时间不能大于报名截止时间"));
      } else if (
        new Date(upContestForm.value.enrollStartDate) >=
        new Date(upContestForm.value.startDate)
      ) {
        callback(new Error("报名开始时间不能大于等于比赛开始时间"));
      } else if (
        new Date(upContestForm.value.enrollStartDate) >
        new Date(upContestForm.value.endDate)
      ) {
        callback(new Error("报名开始时间不能大于比赛结束时间"));
      } else {
        // 报名开始时间检查通过
      }

      if (new Date(upContestForm.value.startDate) < new Date()) {
        callback(new Error("比赛开始时间不能小于当前时间"));
      } else if (
        new Date(upContestForm.value.startDate) <
        new Date(upContestForm.value.enrollStartDate)
      ) {
        callback(new Error("比赛开始时间不能小于报名开始时间"));
      } else if (
        new Date(upContestForm.value.startDate) <
        new Date(upContestForm.value.enrollEndDate)
      ) {
        callback(new Error("比赛开始时间不能小于报名截止时间"));
      } else if (
        new Date(upContestForm.value.startDate) >
        new Date(upContestForm.value.endDate)
      ) {
        callback(new Error("比赛开始时间不能大于比赛结束时间"));
      } else {
        // 比赛开始时间检查通过
      }

      if (new Date(upContestForm.value.endDate) < new Date()) {
        callback(new Error("比赛结束时间不能小于当前时间"));
      } else if (
        new Date(upContestForm.value.endDate) <
        new Date(upContestForm.value.enrollStartDate)
      ) {
        callback(new Error("比赛结束时间不能小于报名开始时间"));
      } else if (
        new Date(upContestForm.value.endDate) <
        new Date(upContestForm.value.enrollEndDate)
      ) {
        callback(new Error("比赛结束时间不能小于报名截止时间"));
      } else if (
        new Date(upContestForm.value.endDate) <
        new Date(upContestForm.value.startDate)
      ) {
        callback(new Error("比赛结束时间不能小于比赛开始时间"));
      } else {
        // 比赛结束时间检查通过
      }
      return true;
    },
    checkEnrollEndDate(rule, value, callback) {
      if (value) {
        if (this.checkFormDate(callback)) {
          callback();
        }
      } else {
        callback(new Error("请选择时间"));
      }
    },
    currentStepNext() {
      // this.$refs.contestFormRef.validate((valid) => {
      //   if (valid) {
      //     console.log(this.currentStep);
      //   } else {
      //     this.$message.error("请检查表单内容是否正确");
      //   }
      // });
      this.currentStep++;
    },
    handleDeleteForm(item) {
      this.$confirm("确定要删除该数据吗?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          this.addOrUpdateFormVisible = true;
          this.$nextTick(() => {
            this.$refs.addOrUpdateFormRef.deleteItem(item);
            this.$message({
              type: "success",
              message: "操作成功",
            });
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消",
          });
        });
    },
    add() {
      this.addOrUpdateFormVisible = true;
      this.$nextTick(() => {
        this.$refs.addOrUpdateFormRef.init();
      });
    },
    syncAdd(list) {
      this.upContestForm.templateValueList = list;
    },
    handleUpdateForm(item) {
      this.addOrUpdateFormVisible = true;
      this.$nextTick(() => {
        this.$refs.addOrUpdateFormRef.init(item);
      });
    },
    async upContestInfo() {
      if (this.upContestForm.password.length === 0) {
        this.$message.error("密码不能为空");
        return;
      }
      const loading = this.$loading({
        lock: true,
        text: "正在发布竞赛...",
        background: "rgba(0, 0, 0, 0.1)",
      });
      this.upContestForm.teamNum = +this.upContestForm.teamNum;
      this.upContestForm.toll = +this.upContestForm.toll;
      this.upContestForm.templateValueList.forEach((item) => {
        if (item.type === 1 && Array.isArray(item.value)) {
          item.value = item.value.join();
        }
      });
      await this.pushContest(this.upContestForm)
        .then(res => {
          console.log(res)
          if (res.code !== 200) {
            this.$message.error(res.msg);
            loading.close();
            return;
          }
          this.currentStep++;
          this.$message.success(res.msg);
        })
        .catch(res => {
          console.log(res)
          this.$message.error("发布竞赛失败");
        })
        .finally((res) => {
          loading.close();
        })
    },
    useDebounce: debounce(function () {
      this.upContestInfo();
    }, 1000),
    pushContest (data) {
      console.log(data)
      return addOrUpdateContestDto(data)
    },
  },
  watch: {
    currentStep: {
      handler: function (newVal) {
        if (newVal === 1) {
          this.addOrUpdateFormVisible = true;
          this.$nextTick(() => {
            const list = this.$refs.addOrUpdateFormRef.createList(
              this.upContestForm.teamNum,
              this.upContestForm.isTeam
            );
            console.log(list)
            this.upContestForm.templateValueList = list;
            this.addOrUpdateFormVisible = false;
          });
        }
      },
      immediate: true,
    },
  },
};
</script>
<style lang="scss" scoped>
.content {
  margin: 0 auto;
  height: 100%;
  width: 800px;

  .steps {
    position: fixed;
    height: 350px;
    top: 120px;
    left: 10px;
  }

  .title {
    margin-top: 50px;
    text-align: center;
    height: 36px;

    h1 {
      margin: 0 auto;
      width: fit-content;
      font-size: 26px;
      color: #787575;
      position: relative;
      border-bottom: 1px solid #ebe7e7;

      &:before {
        content: "";
        display: inline-block;
        width: 80px;
        height: 2px;
        background-color: #9a9797;
        position: absolute;
        left: -90px;
        top: 50%;
        transform: translateY(-50%);
      }

      &:after {
        content: "";
        display: inline-block;
        width: 80px;
        height: 2px;
        background-color: #9a9797;
        position: absolute;
        right: -90px;
        top: 50%;
        transform: translateY(-50%);
      }
    }
  }

  .form {
    margin-top: 20px;

    .template-form-item {
      width: 100%;

      .hove {
        position: relative;
        width: 100%;

        div {
          padding: 0 10px;
          margin-right: 10px;
          float: right;
          cursor: pointer;
          z-index: 100;
          border-radius: 10px;
        }

        div:nth-child(1) {
          position: absolute;
          top: -40px;
          right: -10px;
        }

        div:nth-child(2) {
          position: absolute;
          top: -40px;
          right: 40px;
        }
      }
    }
  }

  .release-success {
    margin-top: 50px;
    height: 100%;
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;

    .icon-success {
      display: flex;
      justify-content: center;
      align-items: center;

      span {
        font-size: 28px;
        font-weight: 900;
      }

      .text {
        margin-left: 20px;
      }
    }

    .btn {
      display: flex;
      justify-content: center;
      margin-top: 20px;
    }
  }
}

.el-message,
.el-message--error,
.is-center {
  z-index: 10000 !important;
}
</style>
